HTML Elements Showcase – Inline vs Block

In HTML, elements are broadly divided into two categories: block-level and inline. Block elements take up the full width and start on a new line, while inline elements only use as much width as needed and flow with text.

Block Elements | Inline Elements | Comparison

Block Elements

1. Paragraph <p>

This is a paragraph inside a block element.

Explanation: Paragraphs always start on a new line.

2. Headings <h1><h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Explanation: Headings define different levels of section titles.

3. Division <div>

This is a div container.

Explanation: Div is a generic block container.

4. Unordered List <ul>

Apple
Banana
Cherry

Explanation: Unordered lists display items with bullets.

5. Ordered List <ol>

First
Second
Third

Explanation: Ordered lists display items with numbers.

6. Blockquote <blockquote>

"Coding is the new literacy."

Explanation: Blockquote is used for long quotations.

7. Horizontal Rule <hr>

Above this line

Below this line

Explanation: HR draws a thematic break.

8. Table <table>

Row 1, Col 1	Row 1, Col 2
Row 2, Col 1	Row 2, Col 2

Explanation: Table is used to display data in rows and columns.

9. Section <section>

This is a section block.

Explanation: Section groups related content together.

10. Article <article>

Sample Article

This is content inside an article element.

Explanation: Article is a block for independent content.

Inline Elements

1. Span <span>

This sentence has a red word inside.

Explanation: Span is an inline container.

2. Anchor <a>

Visit Example website.

Explanation: Anchor creates hyperlinks.

3. Bold <b> and Strong <strong>

This is bold text and this is important text.

Explanation: Both make text bold; strong has semantic meaning.

4. Italic <i> and Emphasis <em>

This is italic text and this is emphasized text.

Explanation: Both italicize; em adds importance.

5. Underline <u>

This is underlined text.

Explanation: U adds underline inline.

6. Superscript <sup> and Subscript <sub>

E = mc² and H₂O.

Explanation: Sup writes above line, sub writes below.

7. Mark <mark>

This is a highlighted word.

Explanation: Mark highlights text inline.

8. Abbreviation <abbr>

HTML is the standard for web pages.

Explanation: Abbr shows abbreviations with tooltips.

9. Code <code>

Inline code example: console.log("Hello")

Explanation: Code tag is for inline code snippets.

10. Small <small>

This is smaller text.

Explanation: Small renders text in a smaller size.

Inline vs Block Comparison

Differences Between Inline and Block Elements
Block Elements	Inline Elements
<div>	<span>
<p>	<a>
<h1> <h6>	<b>
<ul>	<i>
<blockquote>	<abbr>
<table>	<code>
<hr>	<sup>
<section>	<mark>